<template>
	<view>
		<u-sticky>
			<view class="u-demo-block__content topMenu">
				<u-row justify="space-between" gutter="10">
					<u-col span="3">
						<view class="demo-layout">全部({{topGoodsNum}})</view>
					</u-col>
				</u-row>
			</view>
		</u-sticky>
		<view class="vartEmpty" v-if="isDis && !this.token">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text="快去登录吧!">
			</u-empty>
		</view>
		<view v-if="this.token && isDis" >
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" >
				<u-button text="去商场" type="primary" :hairline="true" @click="goShoppingHandler"></u-button>
			</u-empty>
		</view>
		<view class="main" v-if="this.token && !isDis">
			<view class="productList">
				<view class="content">
					<u-list style="height: 70vh;">
						<u-list-item  v-for="(item,index) in dada" :key='item.id'>
							<view class="product">
								<view class="checkbox">
									<u-checkbox-group>
										<u-checkbox :checked="item.isChecked" shape="circle"
											@change="itemChange(index)" />
									</u-checkbox-group>

								</view>
								<view class="productMain">

									<view class="imageBox">
										<image :src="item.image" mode="heightFix"></image>
									</view>
									<view class="productInfo">
										<view class="productName u-line-2">
											{{item.medicine.name}}
										</view>
										<view class="productPriceBox">
											<view class="price">
												￥<text style="display: inline-block;">{{item.price}}</text>
											</view>
											<view class="productAmount">
												x<text style="display: inline-block;">{{item.amount}}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="Amount">
									<text>购买数量</text>
									<u-number-box v-model="item.amount"></u-number-box>
								</view>
							</view>
						</u-list-item>
					</u-list>
				</view>
				<u-toast ref="uToast"></u-toast>
			</view>
		</view>
		<view class="payBox">
			<view class="selectAll">
				<u-checkbox-group>
					
					<u-checkbox :checked="allChecked" :disabled="isDis" shape="circle" @change="toggleAll"></u-checkbox>
					<p class='totalPriceBox'>
						合计：<text class="totalPrice">￥{{totalPrice}}</text>
					</p>
					<view style="display: flex;width: 100%;">
						<u-button :hairline="true" type='error' @click='submitPay' class="button_left" :disabled="isDis">去结算</u-button>
						<u-button :hairline="true" type='primary' @click="shanchu" class="button_right" :disabled="isDis">删除</u-button>
					</view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		gettoken
	} from "../../utils/tools.js"
	import {
		getShopCartAPI,
		deleteShopCartAPI
	} from "../../services/api.js"
	import {
		dalImg
	} from "../../utils/tools.js"
	export default {
		data() {
			return {
				checkboxValue: '',
				allChecked: false, // 全选状态
				isDis:false,
				checkedList: [],
				value: 0,
				token: "",
				dada: [],
				topGoodsNum: 0,
				idd:'',
				add:"",
				cdd:"",
				daa:{
					id:""
				},
				dalist:[{
					price:0,
					amount:0,
				}
					
				],
				title: '分类',

				show: false
			}
		},
		methods: {
			goShoppingHandler(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			selectClick(index) {
				console.log(index)
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			liss() {
				getShopCartAPI().then(res => {
					console.log(res)
					this.dada = res.data.list.map(item => {
						return {
							...item,
							isChecked: false,
							image: dalImg(item.medicine.image),
						}
					})
					this.topGoodsNum = this.dada.length
					if (this.dada.length == 0) {
						this.isDis =true;
						this.allChecked=false
					}else this.isDis=false
				})
			},
			amountChange() {

			},
				itemChange(index) {
					this.dada[index].isChecked = !this.dada[index].isChecked
							// 当单个商品的选中状态改变时，更新全选状态
							this.updateAllChecked();
							//console.log(this.dada[index].isChecked);
							if(this.dada[index].isChecked==true){
								console.log(this.dada[index]);
								this.cdd+=this.dada[index].medicine.id
								this.dalist.price=this.dada[index].price
								this.dalist.amount=this.dada[index].amount
								this.idd+=this.dada[index].id+","
								//console.log(this.idd);
							}
							if(this.dada[index].isChecked==false){
								// console.log(this.idd);
								// console.log(this.dada[index].id);
								this.idd=this.idd.replace(this.dada[index].id+",","")
								this.cdd=this.cdd.replace(this.dada[index].medicine,)
								//console.log(this.idd)
							}
							this.add=this.idd.substring(0, this.idd.length - 1)
							console.log(this.add)
							
							
						},
						toggleAll() {
							this.idd=""
							// 切换全选状态，并更新所有商品的选中状态
							this.dada.forEach(item => {
								//console.log(item.isChecked);
								item.isChecked =! this.allChecked;
								console.log(item.isChecked);
								if(item.isChecked==true){
									
									this.idd+=item.id+","
									console.log(this.idd);
								}
								if(item.isChecked==false){
									this.idd=""
								}
								this.add=this.idd.substring(0, this.idd.length - 1)
								console.log(this.add)
							});
							this.allChecked = !this.allChecked;
							//console.log(this.dada);
						
						},
						updateAllChecked() {
							// 更新全选状态
							const allAreChecked = this.dada.every(item => item.isChecked);
							// console.log(item.allAreChecked);
							
								this.allChecked = allAreChecked;
						},
						shanchu(){
							console.log(this.add);
							deleteShopCartAPI(this.add).then(res=>{
								console.log(res);
								this.liss()
								console.log(this.dada);
								if(this.dada.length==0){
									console.log(this.allChecked);
									// this.allChecked =!this.allChecked;
								}
							})
						},
						//提交订单
						submitPay(){
							if(this.add){
								
							uni.navigateTo({
							    url: `/pages/zhifu/zhifu?id=${this.add}`
							});
							}
						}
		},
		onLoad() {

		},
		onShow() {
			this.token = gettoken()
			this.allChecked=false
			this.add=""
			if(!gettoken()){
				this.topGoodsNum=0
				this.isDis=true
			}else this.liss()
		},
		computed: {
			// 计算总价的属性
			totalPrice() {
				// 使用filter筛选出所有isChecked为true的项
				const checkedItems = this.dada.filter(item => item.isChecked);
				// 如果没有选中的项，直接返回0
				if (checkedItems.length === 0) return 0;
				// 对筛选后的数组使用reduce计算总价
				return checkedItems.reduce((total, item) => {
					return total + (item.price * item.amount);
				}, 0); // 初始值设置为0
			},

		},
	}
</script>

<style lang="scss">
	.topMenu {
		padding: 20rpx;
		background: #fafafa;
	}

	.vartEmpty {
		margin-top: 200rpx;
	}

	.demo-layout {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.payBox {
		width: 100vw;
		height: 110rpx;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		bottom: 100rpx;
		left: 0;

		.selectAll {
			.totalPriceBox {
				font-size: 30rpx;
				font-weight: bold;
				width: 300rpx;
				margin-top: 20rpx;

				.totalPrice {
					font-size: 25rpx;
					color: red;
				}
			}

			u-button {
				height: 80rpx;
			}

			.button_left {
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
			}

			.button_right {
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
			}
		}
	}


	.content {
		background-color: #f2f2f2;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;



		.product {
			height: 300rpx;
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 20rpx;

			.productMain {
				display: flex;
				height: 200rpx;
				margin-bottom: 30rpx;
				align-items: center;

				.imageBox {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					overflow: hidden;

					image {
						height: 100%;
					}
				}

				.productInfo {
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.productName {
						width: 60%;
					}

					.productPriceBox {
						width: 30%;

						.productAmount {
							padding-top: 10rpx;
							padding-left: 20rpx;
							font-size: 20rpx
						}
					}
				}

			}

			.Amount {
				display: flex;
				margin-top: -25rpx;
				justify-content: space-between;
			}
		}
	}
</style>